localStorage 和 sessionStorage 教程

概述

在现代 Web 开发中，localStorage 和 sessionStorage 是两个非常重要的 API，它们允许我们在浏览器中存储数据。这些数据可以在页面刷新或关闭后仍然保留，或者在会话结束时自动清除。本教程将详细介绍这两个 API 的使用方法，包括它们的区别、如何存储和检索数据，以及一些实际应用场景。

1. localStorage 和 sessionStorage 的基本概念

1.1 localStorage

localStorage 是一种持久化的存储方式，数据存储在用户的浏览器中，即使浏览器关闭或页面刷新，数据也不会丢失。localStorage 中的数据没有过期时间，除非用户手动清除浏览器缓存或使用代码删除。

1.2 sessionStorage

sessionStorage 是一种会话级别的存储方式，数据只在当前会话中有效。当用户关闭浏览器标签页或窗口时，sessionStorage 中的数据会被自动清除。

2. 使用 localStorage 和 sessionStorage

2.1 存储数据

你可以使用 setItem 方法将数据存储在 localStorage 或 sessionStorage 中。

// 存储数据到 localStorage
localStorage.setItem('username', 'JohnDoe');

// 存储数据到 sessionStorage
sessionStorage.setItem('token', 'abc123');

2.2 读取数据

使用 getItem 方法可以从 localStorage 或 sessionStorage 中读取数据。

// 从 localStorage 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

// 从 sessionStorage 读取数据
const token = sessionStorage.getItem('token');
console.log(token); // 输出: abc123

2.3 删除数据

使用 removeItem 方法可以删除 localStorage 或 sessionStorage 中的特定数据。

// 删除 localStorage 中的数据
localStorage.removeItem('username');

// 删除 sessionStorage 中的数据
sessionStorage.removeItem('token');

2.4 清空所有数据

使用 clear 方法可以清空 localStorage 或 sessionStorage 中的所有数据。

// 清空 localStorage
localStorage.clear();

// 清空 sessionStorage
sessionStorage.clear();

3. 实际应用场景

3.1 用户偏好设置

你可以使用 localStorage 存储用户的偏好设置，例如主题颜色、字体大小等。

// 存储用户偏好设置
localStorage.setItem('theme', 'dark');
localStorage.setItem('fontSize', '16px');

// 读取用户偏好设置
const theme = localStorage.getItem('theme');
const fontSize = localStorage.getItem('fontSize');

console.log(`Theme: ${theme}, Font Size: ${fontSize}`);

3.2 表单数据暂存

在填写表单时，用户可能会因为各种原因离开页面。你可以使用 sessionStorage 暂存表单数据，以便用户返回时可以继续填写。

// 存储表单数据
sessionStorage.setItem('formData', JSON.stringify({ name: 'John', email: '[email protected]' }));

// 读取表单数据
const formData = JSON.parse(sessionStorage.getItem('formData'));
console.log(formData); // 输出: { name: 'John', email: '[email protected]' }

4. 实践练习

4.1 练习1：用户登录状态管理

创建一个简单的用户登录页面，使用 localStorage 存储用户的登录状态。当用户登录成功后，将用户名存储在 localStorage 中，并在页面加载时检查用户是否已登录。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
</head>
<body>
    <div id="loginStatus"></div>
    <form id="loginForm">
        <input type="text" id="username" placeholder="用户名">
        <input type="password" id="password" placeholder="密码">
        <button type="submit">登录</button>
    </form>

    <script>
        // 检查用户是否已登录
        const username = localStorage.getItem('username');
        if (username) {
            document.getElementById('loginStatus').innerText = `欢迎回来, ${username}!`;
        } else {
            document.getElementById('loginStatus').innerText = '请登录';
        }

        // 处理登录表单提交
        document.getElementById('loginForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 简单的验证
            if (username && password) {
                localStorage.setItem('username', username);
                document.getElementById('loginStatus').innerText = `欢迎, ${username}!`;
            } else {
                alert('请输入用户名和密码');
            }
        });
    </script>
</body>
</html>

4.2 练习2：购物车数据管理

创建一个简单的购物车页面，使用 sessionStorage 存储购物车中的商品信息。当用户添加商品到购物车时，将商品信息存储在 sessionStorage 中，并在页面加载时显示购物车中的商品。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
</head>
<body>
    <div id="cartItems"></div>
    <form id="addItemForm">
        <input type="text" id="itemName" placeholder="商品名称">
        <input type="number" id="itemQuantity" placeholder="数量">
        <button type="submit">添加到购物车</button>
    </form>

    <script>
        // 显示购物车中的商品
        const cartItems = JSON.parse(sessionStorage.getItem('cartItems')) || [];
        displayCartItems(cartItems);

        // 处理添加商品表单提交
        document.getElementById('addItemForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const itemName = document.getElementById('itemName').value;
            const itemQuantity = document.getElementById('itemQuantity').value;

            if (itemName && itemQuantity) {
                cartItems.push({ name: itemName, quantity: itemQuantity });
                sessionStorage.setItem('cartItems', JSON.stringify(cartItems));
                displayCartItems(cartItems);
            } else {
                alert('请输入商品名称和数量');
            }
        });

        // 显示购物车中的商品
        function displayCartItems(items) {
            const cartItemsDiv = document.getElementById('cartItems');
            cartItemsDiv.innerHTML = '';
            items.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.innerText = `${item.name} - ${item.quantity}`;
                cartItemsDiv.appendChild(itemDiv);
            });
        }
    </script>
</body>
</html>

5. 总结

localStorage 和 sessionStorage 是 Web 开发中非常有用的工具，它们可以帮助我们存储和管理用户数据。localStorage 适合存储持久化数据，而 sessionStorage 适合存储会话级别的数据。通过本教程的学习，你应该能够熟练使用这两个 API，并在实际项目中应用它们。

6. 进一步学习

• 了解 IndexedDB，一个更强大的浏览器存储解决方案。
• 学习如何使用 Web Storage API 的高级功能，如存储复杂对象和数组。
• 探索如何在不同页面之间共享 localStorage 和 sessionStorage 数据。

希望本教程对你有所帮助，祝你在 Web 开发的学习旅程中取得成功！